<html>
	<head>
		<title>xkcd extension Options</title>
		<link href='mystyles.css' rel='stylesheet' type='text/css' />
		<script type="text/javascript">
			// Restores select box state to saved value from localStorage.
			function restore_options() {
			  var favorite = localStorage["favorite_color"];
			  if (!favorite) {
				return;
			  }
			  var select = document.getElementById("color");
			  for (var i = 0; i < select.children.length; i++) {
				var child = select.children[i];
				if (child.value == favorite) {
				  child.selected = "true";
				  break;
				}
			  }
			}
		</script>
	</head>

	<body onload="restore_options()">
	<div id="optionsContent">
		Menu Location For Print Button: <input type="text" name="menuLocation" id="menuLocation" maxlength="1" /> <br />
		
		Show these items when printing:<br />
		<ul id="showItems">
			<li><input type="checkbox" name="showLogo" maxlength="1" /> xkcd Logo</li>
			<li><input type="checkbox" name="showTitle" maxlength="1" /> Comic Title</li>
			<li><input type="checkbox" name="showComic" maxlength="1" /> Comic</li>
			<li><input type="checkbox" name="showAlt" maxlength="1" /> Alt Text</li>
		</ul>
		<input type="checkbox" name="autoPrint" maxlength="1" /> Auto Print<br />
		<input type="checkbox" name="enableHotKeys" maxlength="1" /> Enable Hot Keys<br />
		<input type="checkbox" name="fixCaching" maxlength="1" /> Fix Caching<br />
	</div>
<!-- Start of script to put button action on selections to save them -->
		<script type="text/javascript">
			// Saves options to localStorage.
			function save_options() {
			  var select = document.getElementById("color");
			  var color = select.children[select.selectedIndex].value;
			  localStorage["favorite_color"] = color;

			  // Update status to let user know options were saved.
			  var status = document.getElementById("status");
			  status.innerHTML = "Options Saved.";
			  setTimeout(function() {
				status.innerHTML = "";
			  }, 750);
			}
		</script>
	</body>
</html>